<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Tuding布局系统参数速查</title>
<style type="text/css">
h1{ line-height:2em;margin:0; }
table { border-collapse:collapse; border-spacing:0; margin-left:auto; margin-right:auto; }
table .n { width:2em !important; }
table td { text-align:right; font-family: Gulim, Consolas, Monaco, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace; }
body, table, th, td { color:#000000; background-color:#ffffff; font-size:8pt; }
img { border:0; }
table, th, td { border-width:.1em; border-color:#ABD4E6; border-style:solid; }
table { border-collapse:collapse; border-spacing:0; border-width:.2em; }
th, td { padding:0.2em 0.6em; }
th { font-weight:normal; background-color:#EFF8FC; color:#509AAF; text-align:right; }
td { color:#666666; }
address * { vertical-align:middle; font-family:Dotum; }
pre { margin:0; padding:0.2em; font-family: Consolas "Courier New", Courier, monospace; text-align:left; }
</style>
<!--[if lt IE 9]>
<script src="./js/respond.min.js"></script>
<![endif]-->
</head>

<body>
<div class="rowo">
	<div class="fillo">
<table class="tbl" summary="Tuding布局系统参数速查">
  <caption>
  <h1>Tuding布局系统参数速查</h1>
  </caption>
  <tbody>
    <tr>
      <th>栅格列数</th>
      <th>分数</th>
      <th>分数</th>
      <th>百分比</th>
      <th>基于960</th>
      <th>使用要点</th>
    </tr>
    <tr>
      <th>1</th>
      <th>1/24</th>
      <th>&nbsp;</th>
      <td>4.16666%</td>
      <td>40px</td>
      <td rowspan="28"><table class="tbl">
          <caption>
          <h3>Tuding布局最特殊的部分是Fixed、Liquid的最左列居中，以及Hybrid的全部：</h3>
          </caption>
          <tr>
            <th scope="col">&nbsp;</th>
            <th scope="col">&nbsp;</th>
            <th scope="col">&nbsp;</th>
            <th scope="col">&nbsp;</th>
          </tr>
          <tr>
            <th rowspan="3" scope="row">Fixed</th>
            <th>L</th>
            <th>nmn</th>
            <td><pre class="prettyprint linenums">.nmn .ming { width:<span style="color:red;">560px</span>; left:<span style="color:red;">200px</span>; }
.nmn .n1 { width:<span style="color:red;">200px</span>; }
.nmn .n2 { width:<span style="color:red;">200px</span>; }</pre></td>
          </tr>
          <tr>
            <th>T</th>
            <th rowspan="2">mnn</th>
            <td rowspan="2"><pre class="prettyprint linenums">
.mnn .n1 { width:<span style="color:red;">200px</span>; left:<span style="color:red;">560px</span>; }
.mnn .ming { width:<span style="color:red;">560px</span>; }
.mnn .n2 { width:<span style="color:red;">200px</span>; }</pre></td>
          </tr>
          <tr>
            <th>7</th>
          </tr>
          <tr>
            <th rowspan="3" scope="row">Liquid</th>
            <th>L</th>
            <th>nmn</th>
            <td><pre class="prettyprint linenums">.nmn .ming { width:<span style="color:red;">60%</span>; left:<span style="color:red;">20%</span>; }
.nmn .n1 { width:<span style="color:red;">20%</span>; }
.nmn .n2 { width:<span style="color:red;">20%</span>; }</pre></td>
          </tr>
          <tr>
            <th>T</th>
            <th rowspan="2">mnn</th>
            <td rowspan="2"><pre class="prettyprint linenums">.mnn .n1 { width:<span style="color:red;">20%</span>; left:<span style="color:red;">60%</span>; }
.mnn .ming { width:<span style="color:red;">60%</span>; }
.mnn .n2 { width:<span style="color:red;">20%</span>; }</pre></td>
          </tr>
          <tr>
            <th>7</th>
          </tr>
          <tr>
            <th rowspan="5" scope="row">Hybrid</th>
            <th colspan="2">mn</th>
            <td><pre class="prettyprint linenums">.mn .filling { padding-right:<span style="color:red;">240px</span>; }
.mn .n1, .mn .n2 { width:<span style="color:red;">240px</span>; margin-left:<span style="color:red;">-240px</span>; right:<span style="color:red;">-240px</span>; }</pre></td>
          </tr>
          <tr>
            <th colspan="2">nm</th>
            <td><pre class="prettyprint linenums">.nm .filling { padding-left:<span style="color:red;">240px</span>; }
.nm .n1, .nm .n2 { width:<span style="color:red;">240px</span>; margin-right:<span style="color:red;">-240px</span>; left:<span style="color:red;">-240px</span>; }</pre></td>
          </tr>
          <tr>
            <th colspan="2">mnn</th>
            <td><pre class="prettyprint linenums">.mnn .filling { padding-right:<span style="color:red;">480px</span>; }
.mnn .n1 { width:<span style="color:red;">240px</span>; margin-left:<span style="color:red;">-240px</span>; right:<span style="color:red;">-240px</span>; }
.mnn .n2 { width:<span style="color:red;">240px</span>; margin-left:<span style="color:red;">-240px</span>; right:<span style="color:red;">-480px</span>; }</pre></td>
          </tr>
          <tr>
            <th colspan="2">nmn</th>
            <td><pre class="prettyprint linenums">.nmn .filling { padding-left:<span style="color:red;">240px</span>; padding-right:<span style="color:red;">240px;</span> }
.nmn .n1 { width:<span style="color:red;">240px</span>; margin-right:<span style="color:red;">-240px</span>; left:<span style="color:red;">-240px</span>; }
.nmn .n2 { width:<span style="color:red;">240px</span>; margin-left:<span style="color:red;">-240px</span>; right:<span style="color:red;">-240px</span>; }</pre></td>
          </tr>
          <tr>
            <th colspan="2">nnm</th>
            <td><pre class="prettyprint linenums">.nnm .filling { padding-left:<span style="color:red;">480px</span>; }
.nnm .n1 { width:<span style="color:red;">240px</span>; margin-right:<span style="color:red;">-240px</span>; left:<span style="color:red;">-480px</span>; }
.nnm .n2 { width:<span style="color:red;">240px</span>; margin-right:<span style="color:red;">-240px</span>; left:<span style="color:red;">-240px</span>; }</pre></td>
          </tr>
        </table></td>
    </tr>
    <tr>
      <th>2</th>
      <th>2/24</th>
      <th>1/12</th>
      <td>8.33333%</td>
      <td>80px</td>
    </tr>
    <tr>
      <th>3</th>
      <th>3/24</th>
      <th>1/8</th>
      <td>12.5%</td>
      <td>120px</td>
    </tr>
    <tr>
      <th>4</th>
      <th>4/24</th>
      <th>1/6</th>
      <td>16.66666%</td>
      <td>160px</td>
    </tr>
    <tr>
      <th>5</th>
      <th>5/24</th>
      <th>&nbsp;</th>
      <td>20.83333%</td>
      <td>200px</td>
    </tr>
    <tr>
      <th>6</th>
      <th>6/24</th>
      <th>1/4</th>
      <td>25%</td>
      <td>240px</td>
    </tr>
    <tr>
      <th>7</th>
      <th>7/24</th>
      <th>&nbsp;</th>
      <td>29.16666%</td>
      <td>280px</td>
    </tr>
    <tr>
      <th>8</th>
      <th>8/24</th>
      <th>1/3</th>
      <td>33.33333%</td>
      <td>320px</td>
    </tr>
    <tr>
      <th>9</th>
      <th>9/24</th>
      <th>3/8</th>
      <td>37.5%</td>
      <td>360px</td>
    </tr>
    <tr>
      <th>10</th>
      <th>10/24</th>
      <th>5/12</th>
      <td>41.66666%</td>
      <td>400px</td>
    </tr>
    <tr>
      <th>11</th>
      <th>11/24</th>
      <th>&nbsp;</th>
      <td>45.83333%</td>
      <td>440px</td>
    </tr>
    <tr>
      <th>12</th>
      <th>12/24</th>
      <th>1/2</th>
      <td>50%</td>
      <td>480px</td>
    </tr>
    <tr>
      <th>13</th>
      <th>13/24</th>
      <th>&nbsp;</th>
      <td>54.16666%</td>
      <td>520px</td>
    </tr>
    <tr>
      <th>14</th>
      <th>14/24</th>
      <th>7/12</th>
      <td>58.33333%</td>
      <td>560px</td>
    </tr>
    <tr>
      <th>15</th>
      <th>15/24</th>
      <th>5/8</th>
      <td>62.5%</td>
      <td>600px</td>
    </tr>
    <tr>
      <th>16</th>
      <th>16/24</th>
      <th>2/3</th>
      <td>66.66666%</td>
      <td>640px</td>
    </tr>
    <tr>
      <th>17</th>
      <th>17/24</th>
      <th>&nbsp;</th>
      <td>70.83333%</td>
      <td>680px</td>
    </tr>
    <tr>
      <th>18</th>
      <th>18/24</th>
      <th>3/4</th>
      <td>75%</td>
      <td>720px</td>
    </tr>
    <tr>
      <th>19</th>
      <th>19/24</th>
      <th>&nbsp;</th>
      <td>79.16666%</td>
      <td>760px</td>
    </tr>
    <tr>
      <th>20</th>
      <th>20/24</th>
      <th>5/6</th>
      <td>83.33333%</td>
      <td>800px</td>
    </tr>
    <tr>
      <th>21</th>
      <th>21/24</th>
      <th>7/8</th>
      <td>87.5%</td>
      <td>840px</td>
    </tr>
    <tr>
      <th>22</th>
      <th>22/24</th>
      <th>11/12</th>
      <td>91.66666%</td>
      <td>880px</td>
    </tr>
    <tr>
      <th>23</th>
      <th>23/24</th>
      <th>&nbsp;</th>
      <td>95.83333%</td>
      <td>920px</td>
    </tr>
    <tr>
      <th>24</th>
      <th>24/24</th>
      <th>1/1</th>
      <td>100%</td>
      <td>960px</td>
    </tr>
    <tr>
      <th>+</th>
      <th>1/5</th>
      <th>&nbsp;</th>
      <td>20%</td>
      <td>192px</td>
    </tr>
    <tr>
      <th>+</th>
      <th>2/5</th>
      <th>&nbsp;</th>
      <td>40%</td>
      <td>384px</td>
    </tr>
    <tr>
      <th>+</th>
      <th>3/5</th>
      <th>&nbsp;</th>
      <td>60%</td>
      <td>576px</td>
    </tr>
    <tr>
      <th>+</th>
      <th>4/5</th>
      <th>&nbsp;</th>
      <td>80%</td>
      <td>768px</td>
    </tr>
  </tbody>
</table>
<hr />
<table summary="">
  <caption>
  <h1>Tuding布局系统功能规划</h1></caption>
  <tr>
    <th scope="col">&nbsp;
    <th scope="col">三列
    <th scope="col">&nbsp;
    <th scope="col">二列变形
    <th scope="col">&nbsp;
    <th scope="col">一列变形
    <th scope="col">&nbsp;
  <tr>
    <th rowspan="3"><p>常规<br />精简<br />重设</p>
    <th>三列普遍设置
    <th><ul>
        <li>tuding_h(<span style="color:red;">√</span>);</li>
        <li>tuding_fl(<span style="color:red;">√</span>);</li>
        <li>tuding_ft7(<span style="color:red;">√</span>);</li>
      </ul>
    <th>二列变形普遍设置
    <td>
      <ul>
        <li>tuding_h_2cols(<span style="color:red;">√</span>);</li>
        <li>tuding_fl_2cols(<span style="color:red;">√</span>);</li>
        <li>tuding_ft7_2cols(<span style="color:red;">√</span>);</li>
      </ul>
    <th rowspan="3">一列变形
    <td rowspan="3">
      <ul>
        <li>tuding_h_mn_1col(<span style="color:red;">√</span>);</li>
        <li>tuding_h_nm_1col(<span style="color:red;">√</span>);</li>
        <li>tuding_f_mn_1col(<span style="color:red;">√</span>);</li>
        <li>tuding_f_nm_1col(<span style="color:red;">√</span>);</li>
        <li>tuding_1col(<span style="color:red;">√</span>);</li>
      </ul>
  <tr>
    <th>三列特殊页面
    <td>
      <ul>
        <li>tuding_h_reset(<span style="color:red;">√</span>);</li>
        <li>tuding_fl_reset(<span style="color:red;">√</span>);</li>
        <li>tuding_ft7_reset(<span style="color:red;">√</span>);</li>
      </ul>
    <th>二列变形特殊页面<br />（仅重设参数）
    <td>
      <ul>
        <li>tuding_h_2cols_reset(<span style="color:red;">√</span>);</li>
        <li>tuding_fl_2cols_reset(<span style="color:red;">√</span>);</li>
        <li>tuding_ft7_2cols_reset(<span style="color:red;">√</span>);</li>
      </ul>
  <tr>
    <th>三列特殊区域
    <td>
      <ul>
        <li>tuding_h_mn_reset(<span style="color:red;">√</span>);</li>
        <li>tuding_h_nm_reset(<span style="color:red;">√</span>);</li>
        <li>tuding_h_mnn_reset(<span style="color:red;">√</span>);</li>
        <li>tuding_h_nmn_reset(<span style="color:red;">√</span>);</li>
        <li>tuding_h_nnm_reset(<span style="color:red;">√</span>);</li>
      </ul>
      <hr />
      <ul>
        <li>tuding_f_mn_reset(<span style="color:red;">√</span>);</li>
        <li>tuding_f_nm_reset(<span style="color:red;">√</span>);</li>
        <li>tuding_fl_mnn_reset(<span style="color:red;">√</span>);</li>
        <li>tuding_ft7_mnn_reset(<span style="color:red;">√</span>);</li>
        <li>tuding_fl_nmn_reset(<span style="color:red;">√</span>);</li>
        <li>tuding_ft7_nmn_reset(<span style="color:red;">√</span>);</li>
        <li>tuding_f_nnm_reset(<span style="color:red;">√</span>);</li>
      </ul>
    <th>二列变形特殊区域
    <p>仅重设参数？<br />还是完整属性？</p>
    <td>
      <ul>
        <li>tuding_h_mnn_2cols_reset(<span style="color:red;">√</span>);</li>
        <li>tuding_h_nmn_2cols_reset(<span style="color:red;">√</span>);</li>
        <li>tuding_h_nnm_2cols_reset(<span style="color:red;">√</span>);</li>
      </ul>
      <hr />
      <ul>
        <li>tuding_fl_mnn_2cols_reset(<span style="color:red;">√</span>);</li>
        <li>tuding_ft7_mnn_2cols_reset(<span style="color:red;">√</span>);</li>
        <li>tuding_fl_nmn_2cols_reset(<span style="color:red;">√</span>);</li>
        <li>tuding_ft7_nmn_2cols_reset(<span style="color:red;">√</span>);</li>
        <li>tuding_f_nnm_2cols_reset(<span style="color:red;">√</span>);</li>
      </ul>
  <tr>
    <th>附加<br />完整<br />采用
    <th>三列附加采用
    <td>
      <ul>
        <li>tuding_by_h_mn(<span style="color:red;">√</span>);</li>
        <li>tuding_by_h_nm(<span style="color:red;">√</span>);</li>
        <li>tuding_by_h_mnn(<span style="color:red;">√</span>);</li>
        <li>tuding_by_h_nmn(<span style="color:red;">√</span>);</li>
        <li>tuding_by_h_nnm(<span style="color:red;">√</span>);</li>
      </ul>
    <hr>
      <ul>
        <li>tuding_by_f_mn(<span style="color:red;">√</span>);</li>
        <li>tuding_by_f_nm(<span style="color:red;">√</span>);</li>
        <li>tuding_by_fl_mnn(<span style="color:red;">√</span>);</li>
        <li>tuding_by_ft7_mnn(<span style="color:red;">√</span>);</li>
        <li>tuding_by_fl_nmn(<span style="color:red;">√</span>);</li>
        <li>tuding_by_ft7_nmn(<span style="color:red;">√</span>);</li>
        <li>tuding_by_f_nnm(<span style="color:red;">√</span>);</li>
      </ul>
    <th>二列变形附加采用
    <td>
      <ul>
        <li>tuding_by_h_mnn_2cols(<span style="color:red;">√</span>);</li>
        <li>tuding_by_h_nmn_2cols(<span style="color:red;">√</span>);</li>
        <li>tuding_by_h_nnm_2cols(<span style="color:red;">√</span>);</li>
      </ul>
      <hr />
      <ul>
        <li>tuding_by_fl_mnn_2cols(<span style="color:red;">√</span>);</li>
        <li>tuding_by_ft7_mnn_2cols(<span style="color:red;">√</span>);</li>
        <li>tuding_by_fl_nmn_2cols(<span style="color:red;">√</span>);</li>
        <li>tuding_by_ft7_nmn_2cols(<span style="color:red;">√</span>);</li>
        <li>tuding_by_f_nnm_2cols(<span style="color:red;">√</span>);</li>
      </ul>
    <th>一列变形
    <td>
      <ul>
        <li>tuding_by_h_mn_1col(<span style="color:red;">√</span>);</li>
        <li>tuding_by_h_nm_1col(<span style="color:red;">√</span>);</li>
        <li>tuding_by_f_mn_1col(<span style="color:red;">√</span>);</li>
        <li>tuding_by_f_nm_1col(<span style="color:red;">√</span>);</li>
        <li>tuding_by_1col(<span style="color:red;">√</span>);</li>
      </ul>
  <tr>
    <th>备注
    <td colspan="6">需特别注意常规使用时.n2、.v2作为补充项的情况！！！没有必要从“三列普遍设置”直接附加“二列变形特殊区域”变换！！！一列不需要Reset，其作用为否定之前！！！
</table>
<hr />
  <div id="colophon">
    <address style="text-align:center;">
    <img src="./img/logo_16px.gif" alt="">&nbsp;<em>Copyright ©</em> <span><a href="http://www.bubujie.net/" target="_blank">步步街工作室</a> 2008-2012 All Rights Reserved.</span>
    </address>
  </div>
</div></div>
</body>
</html>
